import { useState, useEffect, useRef } from 'react'//商品支付
import { createStore } from "redux"
import reducers from '../../store/reducers';
import { Checkbox, Row, Col } from 'antd';
import BetterScroll from 'better-scroll'  //better-scrool
import './product.less'
import axios from 'axios'
import Cookies from 'js-cookie';
import nowTime from '../../components/timer'
import { useSelector } from 'react-redux'
import Succeed from './succeed'
const Product = (props) => {
    let message = useSelector(state => state.Login.message)
    let [data, setData] = useState([])
    let [flag, setFlag] = useState(false)//是否显示顶部地址
    let [title, setTitle] = useState(0)
    let [ding, setDing] = useState(0)
    // let [timeeer,settiemrr]=useState(0)
    let titnum = useRef()
    let topnum = useRef()
    let [Bsc, changBs] = useState()//scroll
    let [hen1, setHen] = useState(0)
    let [timerr, settimerr] = useState(null)
    let [di, setdi] = useState([])
    let [reduling, setReduling] = useState(0)//redux的零钱
    let [reduji, setReduji] = useState(0)//redux的积分
    let [value1, changeValue] = useState("Zhifubao")
    let [payment, setPayment] = useState([])//支付的方式
    let [integral, setIntegral] = useState(0)//花费积分
    let [loose, setLoose] = useState(0)//花费多少零钱
    let [qita, setqita] = useState(0)//花费其他
    let [moreyflag, setmoreyflag] = useState(true)
    let [dizhi, setdizhi] = useState('请选择地址')
    let [you, setyou] = useState(false)
    let [zhuang, setzhuang] = useState([])
    const productBack = () => {//返回
        props.history.go(-1)
    }
    const address = () => {//跳转地址
        console.log(props.history.push('/mySite'));
    }
    function onChange(checkedValues) {
        let flag = true
        let flagtwo = true
        let flagthree = true
        if (checkedValues.length == 0) {
            payment = ["0", "0", "0"]
        }
        checkedValues.filter((item) => {
            if (item == "A") {
                payment[0] = "1"
                flag = false
            }
            if (item !== "A" && flag) {
                payment[0] = "0"
            }
        })
        checkedValues.filter((item) => {
            if (item == "B") {
                payment[1] = "1"
                flagtwo = false
            }
            if (item !== "B" && flagtwo) {
                payment[1] = "0"
            }
        })
        checkedValues.filter((item) => {
            if (item == "C") {
                payment[2] = "1"
                flagthree = false
            }
            if (item !== "C" && flagthree) {
                payment[2] = "0"
            }
        })
        setPayment(payment)
    }
    const hanlder = (n) => {//
        console.log(n);
        if (Math.abs(n.y) > title) {
            flag = true
            setFlag(flag)
            console.log(flag);
        } else {
            flag = false
            setFlag(flag)
        }
    }
    const pay = () => {//点击支付
        let ff = payment.every(item => item == 0)
        console.log(ff);
        if (ff) {
            alert('请选择支付方式')
        } else {
            if (!hpp()) {
                alert('请选则地址')
                return
            } else {
                console.log(data);
                jiaGe()
                data.forEach((item) => {
                    axios({ method: 'post', url: "/api/front_end/sss", data: {commodity_id:item.commodity_id, user_id: Cookies.get('user_id'), numbers: item.order_number, order_id: item.order_id, car_id: item.car_id, store: item.store, timer: nowTime(), allMoney: allMoney(), loose: reduling, Else: qita, isInte: payment[1], isloose: payment[0], isElse: payment[2], } }).then((res) => {
                        clearTimeout(timerr)
                        timerr = setTimeout(() => {
                            zhuang = [res.data.mess, res.data.code]
                            setzhuang(zhuang)
                            you = true
                            setyou(you)
                        }, 0);
                        settimerr(timerr)
                    })
                })
            }
            //支付
            // user_id                 用户id
            // numbers                 购买数量
            // order_id                订单id
            // car_id                  购物车
            // store                   店铺
            // timer                   付款时间
            // allMoney                总价格
            // loose                   所付零钱11
            // Else                    通过其他方式付的钱11
            // integral                使用的积分数11
            // isInte                  是否使用积分        0未使用 1使用
            // isloose                 是否使用零钱        0未使用 1使用
            // isElse                  是否使用其他支付方式    0未使用 1使用
            // commodity_id            商品id
        }
    }
    const allMoney = () => {
        let diu = data.reduce((a, b) => {
            return a + b.order_price * b.order_number
        }, 0)
        return diu
    }
    const jiaGe = () => {
        let shen = 0
        let fen = 0
        shen = data.reduce((a, b) => {
            return a += b.order_number * b.order_price
        }, 0)
        hen1 = shen
        setHen(hen1)
        if (payment[0] == '1' && moreyflag) {//零钱
            shen -= reduling
        }
        if (shen < 0 && payment[0] == '1') {
            moreyflag = false
            setmoreyflag(moreyflag)
            loose = hen1//花了多少零钱
            setLoose(loose)//花了多少零钱
        }
        if (shen >= 0 && payment[0] == '1') {
            loose = reduling//花了多少零钱
            setLoose(loose)//花了多少零钱
        }
        if (payment[1] == '1' && moreyflag) {//积分    零钱不够

            shen -= (reduji / 10)
        }
        if (shen < 0 && payment[1] == '1') {
            console.log('积分够花');
            console.log(shen);
            console.log(Math.abs(shen) * 10);
            console.log(reduling);
            console.log(reduling - (Math.abs(shen) * 10));
            moreyflag = false
            setmoreyflag(moreyflag)
            integral = (hen1 - loose) * 10 //花了多少积分
            setIntegral(integral)//花了多少积分
        }
        if (shen >= 0 && payment[1] == '1') {//积分不够
            integral = reduji //花了多少积分
            setIntegral(integral)//花了多少积分
        }
        if (payment[2] == '1' && moreyflag) {//其他   积分不够
            qita = shen
            setqita(qita)
        }

        reduji -= integral
        setReduji(reduji)
        reduling -= loose
        setReduling(reduling)
        console.log("花费了零钱:" + loose + "花费了积分" + integral + "其他花费" + qita + "剩余到少积分" + reduji + "剩余多少钱" + reduling);
    }
    const Bs = () => {
        Bsc = new BetterScroll('.product_center', {
            // ...... 详见配置项
            scrollY: true,
            probeType: 2,
            click: true,
            bounce: {
                top: false,
                bottom: true,
                left: false,
                right: false
            }
        })
        Bsc.on('scroll', hanlder)
        changBs(Bsc)
    }
    useEffect(async () => {
        console.log(data);

        console.log(message);
        await axios({ method: 'post', url: "/api/front_end/getOrder", data: { carIdData: JSON.parse(localStorage.getItem('carIdData')) } }).then((res) => {
            data = res.data.data
            setData(data)
        })
        title = titnum.current.clientHeight
        ding = topnum.current.clientHeight - 1 + "px"
        setTitle(title)
        setDing(ding)
        Bs()
        console.log(data);
        reduling = message.now_loose//lingqian
        setReduling(reduling)
        reduji = message.user_integrate
        setReduji(reduji)
    }, [])
    const hpp = () => {
        let hi = typeof (dizhi) === "object" ? true : false
        console.log(hi);
        return hi
    }
    useEffect(async () => {
        let diu = await axios({ method: "post", url: "/api/front_end/getSite", data: { user_id: Cookies.get("user_id") } }).then((res) => {
            return res.data
        })
        console.log(diu.data);

        let result = diu.data.findIndex((item) => { return item.status == 1 })
        if (result !== -1) {
            dizhi = diu.data[result]
            setdizhi(dizhi)
        }
        console.log(dizhi);
        hpp()
    }, [])
    return (<div className={"product_body"}>
        {/* 商品名称 */}
        <div className={"product_top"} ref={topnum}><span onClick={() => { productBack() }} className={"iconfont icon-fanhui2"}></span><p>订单支付</p></div>
        <div className={"product_center"}>
            <div>
                <div className={"product_site"} ref={titnum}>
                    <div>
                        <div>
                            <span className={"iconfont icon-dingwei"}></span>
                        </div>

                    </div>
                    {hpp() ? <div>
                        <div>
                            <span>{dizhi.user_name}</span>
                            <span>{dizhi.user_phone}</span>
                        </div>
                        <div>
                            <p>{dizhi.site_site}</p>
                        </div>

                    </div> : <div><span>请选择你的地址</span></div>}

                    <div onClick={() => { address() }}>
                        <span className={"iconfont icon-fanhui1"}></span>
                    </div>
                </div>

                <div className={"product_Jia"}>

                    <div>
                        <span>商品名称：</span>
                        <span>食物</span>
                    </div>
                </div>

                <div className={"product_ding"}>
                    {/* 我的订单 */}
                    <div>
                        <span>我的订单</span>
                    </div>
                    {/* 循环的订单 */}
                    <div>
                        {data.map((item, index) => {
                            return <div key={index + "7"}>
                                <div>
                                    <img src={item.commodity_images[0]} alt="" />
                                </div>
                                <div>
                                    <p style={{ fontSize: "16px", fontWeight: "bold" }}>{item.commodity_namer}</p>
                                    <span>{item.order_mess}</span>
                                    <span>数量:{item.order_number}</span>
                                </div>
                                <div>
                                    <p style={{ fontSize: "16px", fontWeight: "bold" }}>￥<span>{item.order_price}</span></p>
                                </div>
                            </div>
                        })
                        }
                    </div>
                </div>

                <div className={"product_bottom"}>
                    <div><p>请选择付款的方式</p></div>
                    <Checkbox.Group style={{ width: '100vw' }} onChange={onChange}>
                        <Row>
                            <Col span={24} style={{ borderTop: "1px solid lightgray" }}>
                                <Checkbox value="A" style={{ width: "95vw", margin: "0 auto", height: "12vh", display: "flex", alignItems: "center", fontWeight: "bold", }}><div><span>可用{reduling}元</span><span>零钱</span></div></Checkbox>
                            </Col>
                            <Col span={24} style={{ borderTop: "1px solid lightgray" }}>
                                <Checkbox value="B" style={{ width: "95vw", margin: "0 auto", height: "12vh", display: "flex", alignItems: "center", fontWeight: "bold", }}><div><span>可用{reduji}积分抵用{reduji / 10}元</span><span>积分</span></div></Checkbox>
                            </Col>
                            <Col span={24} style={{ borderTop: "1px solid lightgray" }}>
                                <Checkbox value="C" style={{ width: "95vw", margin: "0 auto", height: "12vh", display: "flex", alignItems: "center" }}><div className={"zhi"}><span><svg style={{ fontSize: "50px" }} className="icon" aria-hidden="true">
                                    <use xlinkHref="#icon-weixinicon2x"></use>
                                </svg></span><span style={{ width: "50px", height: "50px", display: "inline-block" }}>&nbsp;微信</span></div></Checkbox>
                            </Col>
                        </Row>
                    </Checkbox.Group>

                </div>
            </div>

        </div>

        <div className={"product_xia"}><button onClick={() => { pay() }}>确认支付</button></div>
        {flag ? <div className={"location"} style={{ top: ding }}><div>
            <span className={"iconfont icon-dingwei"}></span>
        </div>
            {hpp() ? <div>
                <p>{dizhi.site_site}</p>
            </div> : <div><p>请选择你的地址</p></div>}</div> : null}
        {you ? <Succeed zhuang={zhuang} dizhi={dizhi} {...props}></Succeed> : null}
    </div>)
}
export default Product